<template>
  <div class="regulationsDetails">
    <Header :left-arrow="true" :title="title"/>
    <div class="container">
      <div class="content" v-html="sourceData"/>
    </div>
    <div class="utils">
      <div class="myself-tabbar-item" @click="handleCollection">
        <div class="myself-tabbar-icon">
          <img :src="isCollection" class="icon-img" alt="">
        </div>
        <div class="myself-tabbar-text">收藏</div>
      </div>
      <div class="myself-tabbar-item">
        <div class="myself-tabbar-icon">
          <img :src="require('./images/browse.png')" class="icon-img" alt="">
        </div>
        <div class="myself-tabbar-text">浏览量：{{ browseNumber }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'
import Header from '@/components/Header/Header'
// import Header from '../../components/Header/NoLeftArrowHeader'
import { getPolicyInfoById, collectionPolicy } from '../../api/article'

export default {
  name: 'RegulationsDetails',
  components: {
    Header
  },
  data() {
    return {
      title: '',
      collection: '',
      articleId: '',
      browseNumber: '',
      test: 'hhhhhhhhhhhhhhhh',
      visible: false,
      activeName: '',
      sourceData: ''
    }
  },
  computed: {
    ...mapState({
      id: state => state.user.userInfo.id
    }),

    isCollection() {
      return this.collection === '0' ? require('./images/collect.png') : require('./images/collect-active.png')
    }
  },
  watch: {
    $route(to) {
      // 对路由变化作出响应...
      if (to.query.id) {
        this.fetchData(to.query.id, to.query.kwds)
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    this.activeName = ''
    next()
  },
  mounted() {
    // if (this.$route.query.id) {
    //   this.sourceData = '<p>999</p>'
    // }
    console.log(this.$route.query.id, this.$route.query.kwds)
    this.fetchData(this.$route.query.id, this.$route.query.kwds)
  },
  methods: {
    openCatalogue() {
      this.visible = !this.visible
    },
    // jump(id) {
    //   if (id) {
    //     this.sourceData = '<p>888</p>id'
    //     this.visible = false
    //   }
    //   this.$router.replace({ path: 'regulations-details', query: { id }}).catch(err => err)
    // },
    handleChange(activeName) {
      this.activeName = activeName
    },
    async fetchData(id, kwds) {
      const { code, data } = await getPolicyInfoById({ id, kwds })

      if (code === 0) {
        this.sourceData = data.policyContent
        this.title = data.policyName
        this.collection = data.status
        this.articleId = data.id
        this.browseNumber = data.policyBrowse
      }
    },

    async handleCollection() {
      const { collection } = this
      // 0 未收藏 1 收藏
      this.collection = collection === '0' ? '1' : '0'

      const { articleId, id } = this

      const { code, data } = await collectionPolicy({ id: articleId, userId: id })

      if (code === 0) {
        Toast(data)
      } else {
        Toast(data)
      }
    },

    download() {
      Toast('正在开发中...')
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

body{
  font-size: 16px;
}
.regulationsDetails {
  height: 100%;

  .van-nav-bar {
    background-color: #70A0EC;

    /deep/ .van-nav-bar__left {
      .van-icon {
        color: #FFFFFF;
      }
    }

    /deep/ .van-nav-bar__right {
      .van-nav-bar__text {
        color: #FFFFFF;
      }
    }
  }

  .container {
    position: fixed;
    top: 46px;
    bottom: 46px;
    width: 100%;
    overflow: auto;

    .van-overlay {
      top: 46px;

      > div {
        width: 70%;
        height: 100%;

        .overlayCollapse {
          height: 100%;
          background-color: #ffffff;
        }
      }
    }

    .content {
      font-size: 16px;
      padding: 0 16px;
    }
  }

  .utils {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 46px;
    background: #F3F2F0;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .myself-tabbar-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-size: 12px;
      color: #646566;
      line-height: 1;
      cursor: pointer;

      .myself-tabbar-icon {
        margin-bottom: 2px;

        .icon-img {
          width: 22px;
          height: 22px;
        }
      }

      .myself-tabbar-text {

      }
    }
  }

}

</style>
